<template>
  <div class="w-full">
    <el-select
      v-model="value"
      clearable
      filterable
      placeholder="请选择"
      class="w-full"
    >
      <template #prefix>
        <el-icon>
          <component :is="value" />
        </el-icon>
      </template>
      <el-option
        v-for="item in options.concat(config.logs)"
        :key="item.key"
        class="select__option_item"
        :label="item.key"
        :value="item.key"
      >
        <span class="gva-icon" style="padding: 3px 0 0" :class="item.label">
          <el-icon>
            <component :is="item.label" />
          </el-icon>
        </span>
        <span style="text-align: left">{{ item.key }}</span>
      </el-option>
    </el-select>
  </div>
</template>

<script setup>
  import { reactive } from 'vue'
  import config from "@/core/config";

  defineOptions({
    name: 'Icon'
  })

  const value = defineModel()

  const options = reactive([
    {
      key: 'aim',
      label: 'aim'
    },
    {
      key: 'add-location',
      label: 'add-location'
    },
    {
      key: 'apple',
      label: 'apple'
    },
    {
      key: 'alarm-clock',
      label: 'alarm-clock'
    },
    {
      key: 'arrow-down',
      label: 'arrow-down'
    },
    {
      key: 'arrow-down-bold',
      label: 'arrow-down-bold'
    },
    {
      key: 'arrow-left',
      label: 'arrow-left'
    },
    {
      key: 'arrow-left-bold',
      label: 'arrow-left-bold'
    },
    {
      key: 'arrow-right-bold',
      label: 'arrow-right-bold'
    },
    {
      key: 'arrow-up',
      label: 'arrow-up'
    },
    {
      key: 'back',
      label: 'back'
    },
    {
      key: 'bell',
      label: 'bell'
    },
    {
      key: 'baseball',
      label: 'baseball'
    },
    {
      key: 'bicycle',
      label: 'bicycle'
    },
    {
      key: 'bell-filled',
      label: 'bell-filled'
    },
    {
      key: 'basketball',
      label: 'basketball'
    },
    {
      key: 'bottom',
      label: 'bottom'
    },
    {
      key: 'box',
      label: 'box'
    },
    {
      key: 'briefcase',
      label: 'briefcase'
    },
    {
      key: 'brush-filled',
      label: 'brush-filled'
    },
    {
      key: 'bowl',
      label: 'bowl'
    },
    {
      key: 'avatar',
      label: 'avatar'
    },
    {
      key: 'brush',
      label: 'brush'
    },
    {
      key: 'burger',
      label: 'burger'
    },
    {
      key: 'camera',
      label: 'camera'
    },
    {
      key: 'bottom-left',
      label: 'bottom-left'
    },
    {
      key: 'calendar',
      label: 'calendar'
    },
    {
      key: 'caret-bottom',
      label: 'caret-bottom'
    },
    {
      key: 'caret-left',
      label: 'caret-left'
    },
    {
      key: 'caret-right',
      label: 'caret-right'
    },
    {
      key: 'caret-top',
      label: 'caret-top'
    },
    {
      key: 'chat-dot-square',
      label: 'chat-dot-square'
    },
    {
      key: 'cellphone',
      label: 'cellphone'
    },
    {
      key: 'chat-dot-round',
      label: 'chat-dot-round'
    },
    {
      key: 'chat-line-square',
      label: 'chat-line-square'
    },
    {
      key: 'chat-line-round',
      label: 'chat-line-round'
    },
    {
      key: 'chat-round',
      label: 'chat-round'
    },
    {
      key: 'check',
      label: 'check'
    },
    {
      key: 'chat-square',
      label: 'chat-square'
    },
    {
      key: 'cherry',
      label: 'cherry'
    },
    {
      key: 'chicken',
      label: 'chicken'
    },
    {
      key: 'circle-check-filled',
      label: 'circle-check-filled'
    },
    {
      key: 'circle-check',
      label: 'circle-check'
    },
    {
      key: 'checked',
      label: 'checked'
    },
    {
      key: 'circle-close-filled',
      label: 'circle-close-filled'
    },
    {
      key: 'circle-close',
      label: 'circle-close'
    },
    {
      key: 'arrow-right',
      label: 'arrow-right'
    },
    {
      key: 'circle-plus',
      label: 'circle-plus'
    },
    {
      key: 'clock',
      label: 'clock'
    },
    {
      key: 'close-bold',
      label: 'close-bold'
    },
    {
      key: 'close',
      label: 'close'
    },
    {
      key: 'cloudy',
      label: 'cloudy'
    },
    {
      key: 'circle-plus-filled',
      label: 'circle-plus-filled'
    },
    {
      key: 'coffee-cup',
      label: 'coffee-cup'
    },
    {
      key: 'cold-drink',
      label: 'cold-drink'
    },
    {
      key: 'coin',
      label: 'coin'
    },
    {
      key: 'arrow-up-bold',
      label: 'arrow-up-bold'
    },
    {
      key: 'collection-tag',
      label: 'collection-tag'
    },
    {
      key: 'bottom-right',
      label: 'bottom-right'
    },
    {
      key: 'coffee',
      label: 'coffee'
    },
    {
      key: 'camera-filled',
      label: 'camera-filled'
    },
    {
      key: 'collection',
      label: 'collection'
    },
    {
      key: 'cpu',
      label: 'cpu'
    },
    {
      key: 'crop',
      label: 'crop'
    },
    {
      key: 'coordinate',
      label: 'coordinate'
    },
    {
      key: 'd-arrow-left',
      label: 'd-arrow-left'
    },
    {
      key: 'compass',
      label: 'compass'
    },
    {
      key: 'connection',
      label: 'connection'
    },
    {
      key: 'credit-card',
      label: 'credit-card'
    },
    {
      key: 'data-board',
      label: 'data-board'
    },
    {
      key: 'd-arrow-right',
      label: 'd-arrow-right'
    },
    {
      key: 'dessert',
      label: 'dessert'
    },
    {
      key: 'delete-location',
      label: 'delete-location'
    },
    {
      key: 'd-caret',
      label: 'd-caret'
    },
    {
      key: 'delete',
      label: 'delete'
    },
    {
      key: 'dish',
      label: 'dish'
    },
    {
      key: 'dish-dot',
      label: 'dish-dot'
    },
    {
      key: 'document-copy',
      label: 'document-copy'
    },
    {
      key: 'discount',
      label: 'discount'
    },
    {
      key: 'document-checked',
      label: 'document-checked'
    },
    {
      key: 'document-add',
      label: 'document-add'
    },
    {
      key: 'document-remove',
      label: 'document-remove'
    },
    {
      key: 'data-analysis',
      label: 'data-analysis'
    },
    {
      key: 'delete-filled',
      label: 'delete-filled'
    },
    {
      key: 'download',
      label: 'download'
    },
    {
      key: 'drizzling',
      label: 'drizzling'
    },
    {
      key: 'eleme',
      label: 'eleme'
    },
    {
      key: 'eleme-filled',
      label: 'eleme-filled'
    },
    {
      key: 'edit',
      label: 'edit'
    },
    {
      key: 'failed',
      label: 'failed'
    },
    {
      key: 'expand',
      label: 'expand'
    },
    {
      key: 'female',
      label: 'female'
    },
    {
      key: 'document',
      label: 'document'
    },
    {
      key: 'film',
      label: 'film'
    },
    {
      key: 'finished',
      label: 'finished'
    },
    {
      key: 'data-line',
      label: 'data-line'
    },
    {
      key: 'filter',
      label: 'filter'
    },
    {
      key: 'flag',
      label: 'flag'
    },
    {
      key: 'folder-checked',
      label: 'folder-checked'
    },
    {
      key: 'first-aid-kit',
      label: 'first-aid-kit'
    },
    {
      key: 'folder-add',
      label: 'folder-add'
    },
    {
      key: 'fold',
      label: 'fold'
    },
    {
      key: 'folder-delete',
      label: 'folder-delete'
    },
    {
      key: 'document-delete',
      label: 'document-delete'
    },
    {
      key: 'folder',
      label: 'folder'
    },
    {
      key: 'food',
      label: 'food'
    },
    {
      key: 'folder-opened',
      label: 'folder-opened'
    },
    {
      key: 'football',
      label: 'football'
    },
    {
      key: 'folder-remove',
      label: 'folder-remove'
    },
    {
      key: 'fries',
      label: 'fries'
    },
    {
      key: 'full-screen',
      label: 'full-screen'
    },
    {
      key: 'fork-spoon',
      label: 'fork-spoon'
    },
    {
      key: 'goblet',
      label: 'goblet'
    },
    {
      key: 'goblet-full',
      label: 'goblet-full'
    },
    {
      key: 'goods',
      label: 'goods'
    },
    {
      key: 'goblet-square-full',
      label: 'goblet-square-full'
    },
    {
      key: 'goods-filled',
      label: 'goods-filled'
    },
    {
      key: 'grid',
      label: 'grid'
    },
    {
      key: 'grape',
      label: 'grape'
    },
    {
      key: 'goblet-square',
      label: 'goblet-square'
    },
    {
      key: 'headset',
      label: 'headset'
    },
    {
      key: 'comment',
      label: 'comment'
    },
    {
      key: 'help-filled',
      label: 'help-filled'
    },
    {
      key: 'histogram',
      label: 'histogram'
    },
    {
      key: 'home-filled',
      label: 'home-filled'
    },
    {
      key: 'help',
      label: 'help'
    },
    {
      key: 'house',
      label: 'house'
    },
    {
      key: 'ice-cream-round',
      label: 'ice-cream-round'
    },
    {
      key: 'hot-water',
      label: 'hot-water'
    },
    {
      key: 'ice-cream',
      label: 'ice-cream'
    },
    {
      key: 'files',
      label: 'files'
    },
    {
      key: 'ice-cream-square',
      label: 'ice-cream-square'
    },
    {
      key: 'key',
      label: 'key'
    },
    {
      key: 'ice-tea',
      label: 'ice-tea'
    },
    {
      key: 'knife-fork',
      label: 'knife-fork'
    },
    {
      key: 'iphone',
      label: 'iphone'
    },
    {
      key: 'info-filled',
      label: 'info-filled'
    },
    {
      key: 'link',
      label: 'link'
    },
    {
      key: 'ice-drink',
      label: 'ice-drink'
    },
    {
      key: 'lightning',
      label: 'lightning'
    },
    {
      key: 'loading',
      label: 'loading'
    },
    {
      key: 'lollipop',
      label: 'lollipop'
    },
    {
      key: 'location-information',
      label: 'location-information'
    },
    {
      key: 'lock',
      label: 'lock'
    },
    {
      key: 'location-filled',
      label: 'location-filled'
    },
    {
      key: 'magnet',
      label: 'magnet'
    },
    {
      key: 'male',
      label: 'male'
    },
    {
      key: 'location',
      label: 'location'
    },
    {
      key: 'menu',
      label: 'menu'
    },
    {
      key: 'magic-stick',
      label: 'magic-stick'
    },
    {
      key: 'message-box',
      label: 'message-box'
    },
    {
      key: 'map-location',
      label: 'map-location'
    },
    {
      key: 'mic',
      label: 'mic'
    },
    {
      key: 'message',
      label: 'message'
    },
    {
      key: 'medal',
      label: 'medal'
    },
    {
      key: 'milk-tea',
      label: 'milk-tea'
    },
    {
      key: 'microphone',
      label: 'microphone'
    },
    {
      key: 'minus',
      label: 'minus'
    },
    {
      key: 'money',
      label: 'money'
    },
    {
      key: 'moon-night',
      label: 'moon-night'
    },
    {
      key: 'monitor',
      label: 'monitor'
    },
    {
      key: 'moon',
      label: 'moon'
    },
    {
      key: 'more',
      label: 'more'
    },
    {
      key: 'mostly-cloudy',
      label: 'mostly-cloudy'
    },
    {
      key: 'more-filled',
      label: 'more-filled'
    },
    {
      key: 'mouse',
      label: 'mouse'
    },
    {
      key: 'mug',
      label: 'mug'
    },
    {
      key: 'mute',
      label: 'mute'
    },
    {
      key: 'no-smoking',
      label: 'no-smoking'
    },
    {
      key: 'mute-notification',
      label: 'mute-notification'
    },
    {
      key: 'notification',
      label: 'notification'
    },
    {
      key: 'notebook',
      label: 'notebook'
    },
    {
      key: 'odometer',
      label: 'odometer'
    },
    {
      key: 'office-building',
      label: 'office-building'
    },
    {
      key: 'operation',
      label: 'operation'
    },
    {
      key: 'opportunity',
      label: 'opportunity'
    },
    {
      key: 'orange',
      label: 'orange'
    },
    {
      key: 'open',
      label: 'open'
    },
    {
      key: 'paperclip',
      label: 'paperclip'
    },
    {
      key: 'pear',
      label: 'pear'
    },
    {
      key: 'partly-cloudy',
      label: 'partly-cloudy'
    },
    {
      key: 'phone',
      label: 'phone'
    },
    {
      key: 'picture-filled',
      label: 'picture-filled'
    },
    {
      key: 'phone-filled',
      label: 'phone-filled'
    },
    {
      key: 'picture-rounded',
      label: 'picture-rounded'
    },
    {
      key: 'guide',
      label: 'guide'
    },
    {
      key: 'place',
      label: 'place'
    },
    {
      key: 'platform',
      label: 'platform'
    },
    {
      key: 'pie-chart',
      label: 'pie-chart'
    },
    {
      key: 'pointer',
      label: 'pointer'
    },
    {
      key: 'plus',
      label: 'plus'
    },
    {
      key: 'position',
      label: 'position'
    },
    {
      key: 'postcard',
      label: 'postcard'
    },
    {
      key: 'present',
      label: 'present'
    },
    {
      key: 'price-tag',
      label: 'price-tag'
    },
    {
      key: 'promotion',
      label: 'promotion'
    },
    {
      key: 'pouring',
      label: 'pouring'
    },
    {
      key: 'reading-lamp',
      label: 'reading-lamp'
    },
    {
      key: 'question-filled',
      label: 'question-filled'
    },
    {
      key: 'printer',
      label: 'printer'
    },
    {
      key: 'picture',
      label: 'picture'
    },
    {
      key: 'refresh-right',
      label: 'refresh-right'
    },
    {
      key: 'reading',
      label: 'reading'
    },
    {
      key: 'refresh-left',
      label: 'refresh-left'
    },
    {
      key: 'refresh',
      label: 'refresh'
    },
    {
      key: 'refrigerator',
      label: 'refrigerator'
    },
    {
      key: 'remove-filled',
      label: 'remove-filled'
    },
    {
      key: 'right',
      label: 'right'
    },
    {
      key: 'scale-to-original',
      label: 'scale-to-original'
    },
    {
      key: 'school',
      label: 'school'
    },
    {
      key: 'remove',
      label: 'remove'
    },
    {
      key: 'scissor',
      label: 'scissor'
    },
    {
      key: 'select',
      label: 'select'
    },
    {
      key: 'management',
      label: 'management'
    },
    {
      key: 'search',
      label: 'search'
    },
    {
      key: 'sell',
      label: 'sell'
    },
    {
      key: 'semi-select',
      label: 'semi-select'
    },
    {
      key: 'share',
      label: 'share'
    },
    {
      key: 'setting',
      label: 'setting'
    },
    {
      key: 'service',
      label: 'service'
    },
    {
      key: 'ship',
      label: 'ship'
    },
    {
      key: 'set-up',
      label: 'set-up'
    },
    {
      key: 'shopping-bag',
      label: 'shopping-bag'
    },
    {
      key: 'shop',
      label: 'shop'
    },
    {
      key: 'shopping-cart',
      label: 'shopping-cart'
    },
    {
      key: 'shopping-cart-full',
      label: 'shopping-cart-full'
    },
    {
      key: 'soccer',
      label: 'soccer'
    },
    {
      key: 'sold-out',
      label: 'sold-out'
    },
    {
      key: 'smoking',
      label: 'smoking'
    },
    {
      key: 'sort-down',
      label: 'sort-down'
    },
    {
      key: 'sort',
      label: 'sort'
    },
    {
      key: 'sort-up',
      label: 'sort-up'
    },
    {
      key: 'star',
      label: 'star'
    },
    {
      key: 'stamp',
      label: 'stamp'
    },
    {
      key: 'star-filled',
      label: 'star-filled'
    },
    {
      key: 'stopwatch',
      label: 'stopwatch'
    },
    {
      key: 'success-filled',
      label: 'success-filled'
    },
    {
      key: 'suitcase',
      label: 'suitcase'
    },
    {
      key: 'sugar',
      label: 'sugar'
    },
    {
      key: 'sunny',
      label: 'sunny'
    },
    {
      key: 'sunrise',
      label: 'sunrise'
    },
    {
      key: 'switch',
      label: 'switch'
    },
    {
      key: 'ticket',
      label: 'ticket'
    },
    {
      key: 'sunset',
      label: 'sunset'
    },
    {
      key: 'tickets',
      label: 'tickets'
    },
    {
      key: 'switch-button',
      label: 'switch-button'
    },
    {
      key: 'takeaway-box',
      label: 'takeaway-box'
    },
    {
      key: 'toilet-paper',
      label: 'toilet-paper'
    },
    {
      key: 'timer',
      label: 'timer'
    },
    {
      key: 'tools',
      label: 'tools'
    },
    {
      key: 'top-left',
      label: 'top-left'
    },
    {
      key: 'top',
      label: 'top'
    },
    {
      key: 'top-right',
      label: 'top-right'
    },
    {
      key: 'trend-charts',
      label: 'trend-charts'
    },
    {
      key: 'turn-off',
      label: 'turn-off'
    },
    {
      key: 'unlock',
      label: 'unlock'
    },
    {
      key: 'trophy',
      label: 'trophy'
    },
    {
      key: 'umbrella',
      label: 'umbrella'
    },
    {
      key: 'upload-filled',
      label: 'upload-filled'
    },
    {
      key: 'user-filled',
      label: 'user-filled'
    },
    {
      key: 'upload',
      label: 'upload'
    },
    {
      key: 'user',
      label: 'user'
    },
    {
      key: 'van',
      label: 'van'
    },
    {
      key: 'copy-document',
      label: 'copy-document'
    },
    {
      key: 'video-pause',
      label: 'video-pause'
    },
    {
      key: 'video-camera-filled',
      label: 'video-camera-filled'
    },
    {
      key: 'view',
      label: 'view'
    },
    {
      key: 'wallet',
      label: 'wallet'
    },
    {
      key: 'warning-filled',
      label: 'warning-filled'
    },
    {
      key: 'watch',
      label: 'watch'
    },
    {
      key: 'video-play',
      label: 'video-play'
    },
    {
      key: 'watermelon',
      label: 'watermelon'
    },
    {
      key: 'video-camera',
      label: 'video-camera'
    },
    {
      key: 'wallet-filled',
      label: 'wallet-filled'
    },
    {
      key: 'warning',
      label: 'warning'
    },
    {
      key: 'list',
      label: 'list'
    },
    {
      key: 'zoom-in',
      label: 'zoom-in'
    },
    {
      key: 'zoom-out',
      label: 'zoom-out'
    },
    {
      key: 'rank',
      label: 'rank'
    },
    {
      key: 'wind-power',
      label: 'wind-power'
    }
  ])
</script>

<style lang="scss">
  .gva-icon {
    color: rgb(132, 146, 166);
    font-size: 14px;
    margin-right: 10px;
  }

  .select__option_item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
</style>
